<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">

    <div class="layui-card-body padding-left-40">

        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">登录用户账号</span>
                <span class="color-desc margin-left-5">Username</span>
                <!--{if isset($vo) and isset($vo.username)}-->
                <input disabled value='{$vo.username|default=""}' class="layui-input layui-bg-gray">
                <!--{else}-->
                <input name="username" value='{$vo.username|default=""}' required pattern="^.{4,}$" placeholder="请输入4位及以上字符登录用户账号" class="layui-input">
                <!--{/if}-->
            </label>
            <p class="help-block">登录用户账号创建后，不允许再次修改。</p>
        </div>

        <!--{if $verify}-->
        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">旧的登录密码</span>
                <span class="color-desc margin-left-5">Old Password</span>
                <input type="password" autofocus name="oldpassword" value='' pattern="^\S{1,}$" required placeholder="请输入旧的登录密码" class="layui-input">
            </label>
            <p class="color-desc">请输入旧密码来验证修改权限，旧密码不限制格式。</p>
        </div>
        <!--{/if}-->

        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">新的登录密码</span>
                <span class="color-desc margin-left-5">New Password</span>
                <input type="password" name="password" maxlength="32" pattern="^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,32}$" required placeholder="请输入新的登录密码" class="layui-input">
            </label>
            <p class="color-desc">密码必需包含大小写字母、数字、符号的任意两者组合。</p>
        </div>

        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">重复登录密码</span>
                <span class="color-desc margin-left-5">Retype Password</span>
                <input type="password" name="repassword" maxlength="32" pattern="^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$).{6,32}$" required placeholder="请输入重复登录密码" class="layui-input">
            </label>
            <p class="color-desc">密码必需包含大小写字母、数字、符号的任意两者组合。</p>
        </div>
		
		
        <div class="layui-form-item" style="display:none">
			
			<div style="width:600px;height:250px;border:1px;border-style:solid; border-color:#ff0000;" id="signature3" class="js-signature" >
			</div>
			<p>
<button type="button" class="layui-btn layui-btn-sm" onclick="$('#signature3').jSignature('clear')">清除</button>
<!-- <button type="button" class="btn btn-default" onclick="alert($('#signature3').jSignature('getData', 'base30'))">导出</button> -->
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal" onclick="importImg($('#signature3'))">保存签名</button>
<!-- <button type="button" class="btn btn-default" onclick="importData($('#signature3'))">Import Data to Canvas</button> -->

			<input type="hidden" name="signaturepic" id="signaturepic" class="layui-input" value="">
			<input type="hidden" name="mycolor" id="mycolor" class="layui-input" value="#0e0e0e">
				
			
			<div id="color" style="display:none">查看原来的签名</div>
			</p>
		</div>

		
		<div class="layui-form-item" style="display:none">	
			<div id="signature">
				<span class="color-green font-w7">{if $vo.signatureurl !=''}<div id="oldsig">点击查看原来的签名</div>{/if}</span>
			</div>
        </div>

		
		
		
		

    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' id="id" name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>

</form>
{block name='script'}


<!-- <script>window.jQuery || document.write('<script src="__ROOT__/static/admin.js"><\/script>')</script> -->
<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="__ROOT__/static/plugs/signature/jSignature.js.php"></script>
<script src="__ROOT__/static/plugs/signature/jSignature.CompressorBase30.js.php"></script>
<!-- <script src="__ROOT__/static/plugs/signature/jq-signature-.js"></script> -->

<script type="text/javascript">


      $('#oldsig').on('click',function(){
			var img = "<img src='{$vo.signatureurl}' widht=450 height=280 />";
			layer.open({
			  type:1,
			  shift: 2,
			  shade:0,
			  area: ['685px', '300px'],
			  title:'查看签名',
			  shadeClose:true,
			  content:img
			});
		});





$(document).ready(function() {
	// Prevent default for touch devices
	
	var precolor;
	layui.use('colorpicker', function(){
		  var $ = layui.$
		  ,colorpicker = layui.colorpicker;
		  layui.colorpicker.render({
			elem: '#color' //绑定元素
			,color: '#5fb878'
			,predefine: true // 开启预定义颜色
			,change: function(color){ //颜色改变的回调
				
			  layer.tips('选择了：'+ color, this.elem, {
				tips: 1
			  });
			  
			  $("#mycolor").attr('value' , color );
			  precolor =color;
			  //$("#signature3").jSignature({color:precolor,lineWidth:5,width:600,height:250});
			  //alert(precolor);
			}
		  });
	 });
	 
	 
	 //alert($("#mycolor").val());

	$("#signature3").jSignature({"color":'#0b0b0b',"lineWidth":5,"width":600,"height":250});

});




function importImg(sig)
{
	//alert(sig.jSignature('getData'));
	$("#signaturepic").attr('value' ,sig.jSignature('getData'));
	
	var signatureurl =$("#signaturepic").val();
	var id =$("#id").val();
	//alert(signatureurl);
	$.post("{:url("savesig")}",{id:id,signatureurl:signatureurl},function(res){
		console.log(res);
		if(res.code =='0'){	
			alert(res.info);
			layer.msg(res.info);
			location.reload();
			//location.reload();
			//alert(msg);
			//alert("Drag");
			//$(this).navtab('reload');
			//revertFunc();
		}else{
			layer.msg('保存失败');
		}
	});	
	//sig.children("img.imported").remove();
	//$("<img class='imported' height='180' width='105'></img>").attr("src",sig.jSignature('getData')).appendTo(sig);
}



function importData(sig)
{
	var dataurl=window.prompt("Paste the exported Image data string here to put it back on this canvas","");
	if ($.trim(dataurl)) {
		sig.jSignature('importData',dataurl);
	}
}
</script>
{/block}